<template>
  <div class="absolute inset-0 pointer-events-none overflow-hidden">
    <TransitionGroup 
      name="danmaku"
      tag="div"
      class="relative w-full h-full"
    >
      <div
        v-for="danmaku in activeDanmaku"
        :key="danmaku.id"
        :style="{
          top: `${danmaku.top}%`,
          animationDuration: `${danmaku.duration}s`,
          color: danmaku.color,
          fontSize: `${danmaku.size}rem`
        }"
        class="absolute whitespace-nowrap danmaku-item font-medium"
      >
        {{ danmaku.text }}
      </div>
    </TransitionGroup>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const danmakuPool = [
  { text: "你这种解法是很庸俗的 it's wrong 挫 不行 蛇皮脑残 低智商 不够灵性 没慧根 你这样解的话就是笨蛋", weight: 2 },
  { text: "你去改变啊，没有人拦着你不让你去改变啊", weight: 1 },
  { text: "去吃屎！滚！还要把自己当蠢猪一辈子吗！？", weight: 2 },
  { text: "让校对更轻松", weight: 1 },
  { text: "专业文档处理", weight: 1 },
  { text: "快速精准校对", weight: 1 },
  { text: "团队协作利器", weight: 2 },
  { text: "智能文本分析", weight: 1 },
  { text: "一键完成校对", weight: 1 },
  { text: "高效工作流程", weight: 1 },
  { text: "智能纠错系统", weight: 2 },
  { text: "实时协作平台", weight: 1 },
  { text: "多人在线校对", weight: 1 },
  { text: "智能建议引擎", weight: 1 },
  { text: "文档质量保证", weight: 2 },
  { text: "便捷的批注工具", weight: 1 },
  { text: "智能对比功能", weight: 1 },
  { text: "版本控制管理", weight: 1 },
  { text: "实时同步编辑", weight: 1 },
  { text: "专业校对工具", weight: 2 }
]

const colors = [
  { color: 'rgb(64, 95, 237)', weight: 1 },
  { color: 'rgb(79, 121, 247)', weight: 1.5 },
  { color: 'rgb(99, 102, 241)', weight: 2 },
  { color: 'rgb(129, 140, 248)', weight: 1.5 },
  { color: 'rgb(139, 92, 246)', weight: 1 }
]

// 字体大小范围
const fontSizes = [
  { size: 1.25, weight: 1 },     // 20px - 小
  { size: 1.5, weight: 2 },      // 24px - 中（常用）
  { size: 1.75, weight: 1.5 },   // 28px - 中大
  { size: 2, weight: 1 },        // 32px - 大
  { size: 2.5, weight: 0.5 }     // 40px - 特大
]

const activeDanmaku = ref([])
let danmakuId = 0

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min
}

function weightedRandom(items) {
  const totalWeight = items.reduce((sum, item) => sum + item.weight, 0)
  let random = Math.random() * totalWeight
  
  for (const item of items) {
    random -= item.weight
    if (random <= 0) {
      return item
    }
  }
  return items[0]
}

function createDanmaku() {
  const danmakuItem = weightedRandom(danmakuPool)
  const colorItem = weightedRandom(colors)
  const fontSizeItem = weightedRandom(fontSizes)
  
  const top = getRandomInt(5, 90)
  const duration = getRandomInt(8, 15)
  
  const danmaku = {
    id: danmakuId++,
    text: danmakuItem.text,
    top,
    duration,
    color: colorItem.color,
    size: fontSizeItem.size
  }
  
  activeDanmaku.value.push(danmaku)
  setTimeout(() => {
    const index = activeDanmaku.value.findIndex(d => d.id === danmaku.id)
    if (index !== -1) {
      activeDanmaku.value.splice(index, 1)
    }
  }, duration * 1000)
}

let intervalId = null

onMounted(() => {
  // 初始化时创建几个弹幕
  for (let i = 0; i < 5; i++) {
    setTimeout(() => createDanmaku(), i * 800)
  }
  
  // 定期创建新弹幕
  intervalId = setInterval(() => {
    if (activeDanmaku.value.length < 15) { // 限制最大同时显示数量
      createDanmaku()
    }
  }, 2000)
})

onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId)
  }
})
</script>

<style scoped>
.danmaku-item {
  transform: translateX(100vw);
  animation: danmaku-move linear;
  will-change: transform;
  opacity: 0.8;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
  font-weight: 500;
}

@keyframes danmaku-move {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(-100%);
  }
}

.danmaku-enter-active {
  transition: all 0.3s ease;
}

.danmaku-leave-active {
  transition: all 0.3s ease;
}

.danmaku-enter-from,
.danmaku-leave-to {
  opacity: 0;
  transform: translateX(100vw);
}
</style> 